<template>
  <div class="footer">
      <!-- 判断请求路径与对应路径是否相等，相等则有on这个class类样式 -->
    <div  :class="{on: '/home'===$route.path}" @click="goto('/home')">
        <span>
        <i class="iconfont icon-waimai"></i>
        </span>
        <span>外卖</span>
    </div>
    <div :class="{on: '/search'===$route.path}" @click="goto('/search')">
        <span>
        <i class="iconfont icon-sousuo1"></i>
        </span>
        <span>搜索</span>
    </div>
    <div :class="{on: '/order'===$route.path}"  @click="goto('/order')">
        <span>
        <i class="iconfont icon-dingdan"></i>
        </span>
        <span>订单</span>
    </div>
    <div :class="{on: '/personal'===$route.path}" @click="goto('/personal')">
        <span>
        <i class="iconfont icon-geren"></i>
        </span>
        <span>个人</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goto (path) {
      // replace跳转，新连接替换旧链接
      this.$router.replace(path)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
// 引入混合函数样式
@import "../../common/stylus/mixins.styl"
  .footer
    // 顶部白色边框
    top-border-1px(#e4e4e4)
    position fixed
    z-index 100
    left 0
    right 0
    bottom 0
    background-color #fff
    width 100%
    height 50px
    display flex
    color #999999
    div
     width 25%
     height 50px
     float left
     text-align center
     padding-top 5px
     &.on
      color rgb(59,167,118)
     span
       margin-top 2px
       margin-bottom 2px
       display block
       font-size 14px
       .iconfont
         font-size 22px
</style>
